<template>
	<view>
		  <!-- #ifdef MP-WEIXIN -->
		<navbar :bgColor="bgColor" :btnColors='btnColor' title="设备归还" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
			  <!-- #endif -->	
		
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20" v-if="(order_list.order.status==6)">
			<view class="wait_order flex" style="color: #AFACA1">
				<view>
					<u-icon
					  size="21"
					 :name="api_image+'/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">租用中</text>
			</view>					
		</view>
		
		
		<view class="ml-20 mr-20 border-radius" style="background: #fff;margin-top: 20rpx;"> 
		    <view class="order_main">	
				<view class="flex pl-35 flex-direction" v-for="(item,index) in order_list.goods" :key="index">
					<view class="flex mt-20 mb-10">							
						<view slot='icon' class="flex align-center" >
							<image class="grid-img" :src="item.goods_logo" bindtap="handleChangeGoods" 	mode="scaleToFill"></image>
						</view>
						<view class="confirm-wrap-content flex flex-direction justify-between ml-10 mt-20" slot='content'>
							<view>
							  <view class='flex align-center cell text-lg mb-10'>{{item.goods_title}}</view>
							  <view class='flex align-center cell text-sm text-gray mb-10'>{{item.goods_spec}}</view>
							</view>
							<view class='confirm-wrap-price flex justify-between text-lg'>
							 <text class="text-red" style="font-size: 30rpx;color: #FF2A00;font-family: Source Han Sans CN;">￥{{item.selling_price}}/天</text>    
							</view>
							
						</view>
				    </view>
					
		        </view>
			</view>
		</view>		
		
		<view class="flex flex-direction ml-20 mr-20  border-radius" style=" background: #fff;  line-height: 2.55555556;font-size: 26rpx;margin-top: 50rpx">
				  
		  <view class="ml-30 mr-30" v-if="orderType==2">
		  	  <view class="flex flex-direction">
		  	  	<text class="text-df mt-5" style="color: rgba(1, 31, 55, 0.6);">邮寄地址</text>
				<text class="text-df" style="">{{order_list.order.express_address}}</text>
		  	  </view>			  
			  <view class="flex justify-between  align-center pb-20 mb-20" style="background: rgba(1,31,55,0.03);border-radius: 16rpx;">
			  	  <view class="flex ml-30 mt-15 align-center">
			  	  	<image src="../../../../static/resource/order_date.png" style="width: 29rpx;height: 34rpx;"></image>
					<text class="text-df ml-20">快递公司</text>
			  	  </view>
				  <input  v-model="back_kuaidi_name" class="uni-input mr-30 text-right" focus placeholder="请填写快递公司" placeholder-class="remark" style="font-size: 28rpx;"/>	
			  </view>			  
			  <view class="flex justify-between  align-center pb-20 mb-20" style="background: rgba(1,31,55,0.03);border-radius: 16rpx;">
			  	<view class="flex ml-30 mt-15 align-center">
			  	  	<image src="../../../../static/resource/order_date.png" style="width: 29rpx;height: 34rpx;"></image>
			  		<text class="text-df ml-20">快递单号</text>
			  	</view>
			  	<input  v-model="back_kuaidi_number" class="uni-input mr-30 text-right" focus placeholder="请填写快递单号" placeholder-class="remark" style="font-size: 28rpx;"/>	
			  </view>			  
		  </view>
		  
		  <view class="ml-30 mr-30 mt-30" v-if="orderType==1">
		  	  		  
			  <view class="flex justify-between  align-center pb-20 mb-20" style="background: rgba(1,31,55,0.03);border-radius: 16rpx;">
				  <view class="flex ml-30 mt-15 align-center">
					<image src="../../../../static/resource/order_map.png" style="width: 29rpx;height: 34rpx;"></image>
					<text class="text-df ml-20">门店地址</text>
				  </view>
				  <view class="flex mr-15" @click="routeToNext()">
					<text style="color: rgba(1, 31, 55, 0.4);">{{shop_name?shop_name:'选择归还门店'}}</text>
				  	<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"  ></u-icon>
				  </view>
				 
			  </view>			  
			  <view class="flex justify-between  align-center pb-20 mb-20" style="background: rgba(1,31,55,0.03);border-radius: 16rpx;">
				<view class="flex ml-30 mt-15 align-center">
					<image src="../../../../static/resource/order_date.png" style="width: 29rpx;height: 34rpx;"></image>
					<text class="text-df ml-20">门店地址</text>
				</view>
				<view class="flex mr-15" @click="open_date">
					<text class="text-df" style="color: rgba(1, 31, 55, 0.4);">{{back_date_time?back_date_time:'选择归还时间'}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"  ></u-icon>
				</view>
			  </view>			  
		  </view>
		  
		  
		  
		</view>
		 
		<view class="about-button" style="background-color: #ffffff">
			<view class=""  @click="submit_order()">
				<button class="about-button-alipay">提交</button>
			</view>			
		</view>
		
	<!--免费商品-->
	<t-accesGoods :show="showfee" ref="accesList" @accesClose="accesClose" :atype='atype' @accesOk="accesOk"></t-accesGoods>	  
	
	<!-- 地址信息 -->
	<biz-address  :show="showSelection" ref="goodsSpec" @chooseCancel="chooseCancel" :orderType="orderType" @chooseaddess='chooseaddess'></biz-address>	
	
	
	 <u-calendar ref="calendar" title="租期选择"   :defaultDate="defaultDateMultiple" round="true" color="#36B3E9 " :show="date_show" :mode="mode"  :formatter="formatter" @confirm="confirm" @close="date_close"></u-calendar>
	
	</view>
</template>

<script>
	import accesGoods from "@/components/accesGoods/index.vue";
		import address from "@/components/address/index.vue";
	import QRCode from "@/utils/weapp-qrcode.js" //引入生成二维码的插件
	import config from '@/utils/config.js';
	
	export default {
		components: {
			 "biz-address": address,
		    "t-accesGoods":accesGoods
		},
	 	data() {
	 		return {
				 ...getApp().globalData.config,
				orderId:'',
				order_list:{
					order:{
						storage:{}
					}
				},    
				shopInfo:{},
				showfee:false,
				atype:1,
				orderType:2,//2:快递，1：门店
				back_kuaidi_name:'',
				back_kuaidi_number:'',
				date_show:false,
				mode: 'single',
				back_date_time:'',
				defaultDateMultiple: [],
				atype:"1",
				shop_name:'',
				shop_id:'',
				showSelection:false,
			}
		},
		onLoad(options) {
			if(options.orderId){
				this.orderId=options.orderId
			}			
		},
		onShow() {
			let that=this     
		    let obj_data={
				token:uni.getStorageSync('userInfo').app_openid,
				login_type:'app',
				order_id:this.orderId
		    }      
		    this.$http.orderInfo(obj_data).then(res=>{               
				if(res.resCode=="9999"){
				  that.order_list=res.data
				}else{
				  uni.showToast({title:res.resMessage,icon:"none"})
				}
		    })  
			setTimeout(()=>{
						this.reateQrcode()
						
			},500)
		},
		methods:{	
			//确认地址
			chooseaddess(events){
				this.shop_name=events.realname
				this.shop_id=events.id
				this.showSelection=false
			},
			//选择收货地址
			routeToNext(){				
				let that=this
				let goodsId = this.order_list.goods[0].goods_id
				this.$http.AddressList({
					goodsId,
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',
					type:1,
					}).then(res=>{
					if(res.resCode=='9999'){
						this.showSelection=true
						that.$refs.goodsSpec.showSpecs(res.data)        
					}
				}) 			
			},
			chooseCancel(){
				this.showSelection=false
			},
			
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				
				// 对day.date格式化成 "YYYY-MM-DD HH:mm:ss"
				day.date = moment(day.date).format("YYYY-MM-DD HH:mm:ss")
				
				if(day.month == month && day.day == date + 3){
					day.bottomInfo = ''
					day.dot = true
				}
				return day
			},
			//开启日历
			confirm(e) {
				this.defaultDateMultiple=e				
				this.back_date_time=e[0]
				this.date_show=false
				
			},
			//关闭日历
			date_close(){
				this.date_show=false
			},
			open_date(){
				this.date_show=true
			},
			changeOrder(events){
				console.log('events',events.currentTarget);
				this.orderType=events.currentTarget.dataset.ordertype   
			},
			feeGoods(type){
				this.showfee=true
				this.atype=type
				this.$refs.accesList.OrderSpecs(this.orderId,type)
			},
			accesClose(){
				this.showfee=false
			},
			reateQrcode() {			
				var that = this;
				new QRCode('myQrcode', {
					text:config.api_url+'?type=1&orderId='+this.orderId,
					width: 200,
					height: 200,
					padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
					correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
					// callback: (res) => {
					//   // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
					//   that.data.qrcodePath = res.path;
					// }
				})
			},
			//提交信息
			submit_order(){
				//orderType:2,//2:快递，1：门店
				let obj_data={
					orderId:this.orderId,
					orderType:this.orderType,
					// back_kuaidi_name:this.back_kuaidi_name,
					// back_kuaidi_number:this.back_kuaidi_number,
				}
				if(obj_data.orderType==2){
					obj_data.back_kuaidi_name=this.back_kuaidi_name
					obj_data.back_kuaidi_number=this.back_kuaidi_number
					if(!obj_data.back_kuaidi_name){
						uni.showToast({title:'请填写快递名称~',icon:"none"})
						return
					}
					if(!obj_data.back_kuaidi_number){
						 uni.showToast({title:'请填写快递单号~',icon:"none"})
						 	return
					}
				}
				
				if(obj_data.orderType==1){
					obj_data.shop_name=this.shop_name					
					obj_data.back_date_time=this.back_date_time
					obj_data.shopId=this.shop_id
					
					if(!obj_data.shop_name){
						uni.showToast({title:'请填写门店地址~',icon:"none"})
						return
					}
					if(!obj_data.back_date_time){
						 uni.showToast({title:'请填写归还时间~',icon:"none"})
						 	return
					}					
				}			
				
				this.$http.BackOrder(obj_data).then(res=>{
					if(res.resCode=='9999'){
					    uni.showToast({title:'操作成功！',icon:"none"})
						setTimeout(()=>{
						   this.$routers.router('/pages/order/index?currentTab=7','switchTab')  
						},3000)        
					}
				}) 	
				
			}
		}
	}
</script>

<style>
	page{
	  background-color: #f3f6fb;
	}
	
	.about-button{
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding-bottom: 40rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #FFFFFF;
		 border: none !important;
	}
	
	.about-button-alipay{
		width: 620rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #36B3E9 ;
		border-radius: 40rpx;
		border: none !important;height: 80rpx;text-align: center;line-height: 81rpx;
		
	}
	
	button::after {
	    border: none;
	}
	
	.about-button:active{
	  opacity: 0.5;
	}
	.button-address{
		width: 160rpx;
		
	}
	
	.send_number{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50%;
		height: 100rpx;
		color: rgba(1, 31, 55, 0.6);
		/* border-radius: 10rpx; */
		background:rgba(1,31,55,0.05);	
	}
	.order_active{
		font-weight: bold;
		font-size: 34rpx;
		color: #FFA200;
		background: #ffff;
		margin-top: -30rpx;
		padding-top: 30rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.send_number text{
		font-weight: 400;
		font-size: 32rpx;
		
		margin-left: 15rpx;
		line-height: 174rpx;
	}
	
	.main-cur{
		display:flex;
		flex-direction:column;
		margin-top: 15rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		/* padding: 20rpx 20rpx 35rpx 20rpx; */
		background-color: #ffff;		
		border-radius:20rpx;
	}
	
	.mask {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  display: flex;
	  background-color: rgba(0, 0, 0, 0.7);
	  z-index: 9999;
	  flex-direction: column;
	  justify-content: flex-end;
	}
	
	.content {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  background: white;
	  border-top-right-radius: 20rpx;
	  border-top-left-radius: 20rpx;
	}
	
	.top {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  border-bottom: 1rpx solid #d3cfcf;
	}
	
	.top-text {
	  font-size: 30rpx;
	  width: 150rpx;
	  height: 100rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	}
	
	.top-left-color {
	  color: #878787;
	}
	
	.top-left-color-hover {
	  color: #f1eaea;
	}
	
	.top-right-color {
	  color: #1296DB;
	}
	
	.top-right-color-hover {
	  color: #82ccf3;
	}
	
	.item {
	  width: 100%;
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 18px;
	}
	.productNameText{
		width: 420rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		word-break:break-all;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;overflow:hidden;
		font-size: 24rpx;
		color: #011F37;
		padding-right: 20rpx;
	}
	
	
	.shop_info{
	  background: #fff;
	   width: 100%;
	   height: auto;
	   display: flex;
	  flex-direction: row;
	  font-family: "Microsoft YaHei";
	}
	.shop_detail{
	  font-size: 28rpx;
	  margin: 20rpx 50rpx;
	}
	.shop_detail_l2{    
	  display: flex;
	  flex-direction: row;
	  color: gray;
	  font-size: 13px;
	  margin-left: -19px;
	  width: 490rpx;
	  margin-top: 10rpx;
	}
	.shop_type{
	  display: flex;
	  flex-direction: row;
	  padding: 17rpx;
	  width: 157rpx;
	  background: #fff;
	  height: 25rpx;
	  border-radius: 35rpx;
	  margin-top: 46rpx;
	  margin-right: 19rpx;
	  border: 2rpx solid rgb(216, 210, 210);
	  box-shadow: 0 0 5px rgb(202, 196, 196);
	}
	
	.shop_type_l1{
	  background: #000000;
	    color: white;
	    text-align: center;
	    font-size: 28rpx;
	    margin: -12rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	}
	
	.shop_type_l2{
	 
	    color: rgb(165, 155, 155);
	    text-align: center;
	    font-size: 28rpx;
	    margin: -10rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	  
	}
	.grid-img{  
	  width: 160rpx;
	  height: 160rpx;
	  margin: 15rpx;
	  border-radius: 10rpx;
	  
	}
	
	.qhm{
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 14px;
	  background: #f5f2f2;
	  border-width: 50px;
	  border-radius: 10rpx;
	  width: 140rpx;
	  margin-left: 42%;
	  margin-top:20rpx;
	  border-color: #000;
	  color: rgb(82, 76, 76);
	}
	
	.qhm3{
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;  
	}
	

</style>